<template>
	<view :style="colorStyle">
		<view class='shoppingCart copy-data'>
			<view v-if="(skuArr.length > 0) ">
				<view class='list'>
					<checkbox-group @change="checkboxChange">
						<block v-for="(item,index) in skuArr" :key="index">
							<view class='item acea-row row-between-wrapper'>
								<!-- #ifndef MP -->
								<checkbox :value="(item.id).toString()" :checked="item.checked"/>
								<!-- #endif -->
								<!-- #ifdef MP -->
								<checkbox :value="item.id" :checked="item.checked"/>
								<!-- #endif -->
								<view hover-class='none' class='picTxt acea-row row-between-wrapper'>
									<view class='pictrue'>
										<image :src='item.image'></image>
									</view>
									<view class='text'>
										<view class='line1' :class="item.attrStatus?'':'reColor'">
											{{item.suk}}
										</view>
										<view class='money'>{{$t(`￥`)}}{{item.price}}</view>
									</view>
									<view class='carnum acea-row row-center-wrapper'>
										<view class="reduce" :class="item.numSub ? 'on' : ''" @click.stop='subCart(index)'>-</view>
										<view class="num">
											<input type="number" v-model="item.cart_num" @click.stop @input="iptCartNum(index)" @blur="blurInput(index)" />
										</view>
										<view class="plus" :class="item.numAdd ? 'on' : ''" @click.stop='addCart(index)'>+</view>
									</view>
								</view>
							</view>
						</block>
					</checkbox-group>
				</view>
			</view>
			<view class='footer acea-row row-between-wrapper' v-if="skuArr.length > 0" :class="is_diy && is_diy_set? 'on' : ''">
				<view>
					<checkbox-group @change="checkboxAllChange">
						<checkbox value="all" :checked="!!isAllSelect" />
						<text class='checkAll'>{{$t(`全选`)}}({{selectValue.length}})</text>
					</checkbox-group>
				</view>
				<view class='money acea-row row-middle' v-if="footerswitch==true">
					<text class='font-color'>{{$t(`￥`)}}{{selectCountPrice}}</text>
					<form @submit="subOrder" v-if="isShow">
						<button class='placeOrder bg-color' formType="submit">{{$t(`立即下单`)}}</button>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	// #endif
	// #ifndef APP-PLUS
	let sysHeight = 0
	// #endif
	import {
		getUserInfo,
	} from '@/api/user.js';
	import {
        postCartAdd2,
		getProductDetail
	} from '@/api/store.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue"
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import pageFooter from '@/components/pageFooter/index.vue'
	import colors from "@/mixins/color";
	import {HTTP_REQUEST_URL} from '@/config/app';
	import {
		getNavigation
	} from '@/api/public.js'
	export default {
		components: {
			pageFooter,
			tabBar,
			// #ifdef MP
			authorize
			// #endif
		},
		mixins: [colors],
		data() {
			return {
				imgHost:HTTP_REQUEST_URL,
				is_diy: uni.getStorageSync('is_diy'),
				cartCount: 0,
				footerswitch: true,
				cartList: {
					valid: [],
					invalid: []
				},
				isAllSelect: false, //全选
				selectValue: [], //选中的数据
				selectCountPrice: 0.00,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				loading: false,
				loadend: false,
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				storeInfo: {},
				attrValue: '', //已选属性
				cartId: [],
				product_id: 0,
				sysHeight: sysHeight,
				activeRouter: '',
				is_diy_set: false,
				skuArr: [],
				userInfo: {},
				isShow: true
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.is_diy) {
				if (uni.getStorageSync('FOOTER_BAR')) {
					uni.hideTabBar()
				} else {
					this.is_diy_set = true
				}
			} else {
				uni.hideTabBar()
			}
			let that = this;
			that.id = options.id;

			if (that.isLogin == false) {
				toLogin();
			}
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route;//获取当前页面路由
			this.activeRouter = '/' + curRoute;
		},
		onShow() {
			if (this.isLogin == true) {
				this.getGoodsDetails();
				this.getUserInfo();

				this.loadend = false;
				this.page = 1;
				this.cartList.valid = [];
				this.cartList.invalid = [];
				this.footerswitch = true;
				this.cartList = {
					valid: [],
					invalid: []
				},
				this.isAllSelect = false; //全选
				this.selectValue = []; //选中的数据
				this.selectCountPrice = 0.00;
				this.cartCount = 0;
				this.isShowAuth = false;
			};
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},

			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					if(res.data.examine !==2){
						let msg = '';
						that.isShow = false;
						switch (res.data.examine) {
							case 0:
								msg = '请先完善营业执照等信息!';
								break;
							case 1:
								msg = '请耐心等待后台审核!';
								break;
							case 3:
								msg = '审核不通过,请重新提交!';
								break;
						}

						uni.showLoading({
							title: this.$t(msg),
							mask: true
						});
						setTimeout(() => {
							uni.hideLoading();

							if(res.data.examine !==1) {
								uni.navigateTo({
									url: '/pages/users/user_info/index'
								})
							}
						}, 1000);
					}
				});
			},

			/**
			 * 获取产品详情
			 *
			 */
			getGoodsDetails: function() {
				let that = this;
				getProductDetail(that.id)
						.then((res) => {
							that.skuArr = [];
							for (let key in res.data.productValue) {
								let obj = res.data.productValue[key];
								obj.cart_num = 1;
								obj.numSub = true;
								obj.numAdd = false;
								obj.attrStatus = true;
								that.skuArr.push(obj);
							}
							that.storeInfo = res.data.storeInfo;
						})
						.catch((err) => {
							//状态异常返回上级页面
							return that.$util.Tips({
								title: err.toString(),
							}, {
								tab: 3,
								url: 1,
							});
						});
			},
			/**
			 * 购物车手动填写
			 *
			 */
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, 'cart_num', e);
			},

			//提交订单
			subOrder() {
				let that = this;
				let cartId = [];

				if (that.selectValue.length > 0) {
					uni.showLoading({
						title: this.$t(`创建订单中`),
						mask: true
					});

					for (var i=0;i<that.skuArr.length;i++){
						if (that.inArray(that.skuArr[i].id, that.selectValue)) {
							let q = {
								productId: that.id,
								cartNum: that.skuArr[i].cart_num,
								new: 0,
								uniqueId: that.skuArr[i].unique,
								virtual_type: that.storeInfo.virtual_type,
							};
                            postCartAdd2(q)
									.then(function(res) {
										cartId.push(res.data.cartId);
									})
									.catch((err) => {
										that.isOpen = false;
										return that.$util.Tips({
											title: err,
										});
									});
						}
					};

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/goods/order_confirm/index?cartId=' + cartId.join(',')
						});

					}, 1000);
				} else {
					return that.$util.Tips({
						title: that.$t(`请选择产品`)
					});
				}
			},

			checkboxAllChange: function(event) {
				let value = event.detail.value;
				if (value.length > 0) {
					this.setAllSelectValue(1)
				} else {
					this.setAllSelectValue(0)
				}
			},
			setAllSelectValue: function(status) {
				let that = this;
				let selectValue = [];
				let valid = that.skuArr;
				if (valid.length > 0) {
					let newValid = valid.map(item => {
						if (status) {
							if (that.footerswitch) {
								if (item.attrStatus) {
									item.checked = true;
									selectValue.push(item.id);
								} else {
									item.checked = false;
								}
							} else {
								item.checked = true;
								selectValue.push(item.id);
							}
							that.isAllSelect = true;
						} else {
							item.checked = false;
							that.isAllSelect = false;
						}
						return item;
					});
					that.$set(that.cartList, 'valid', newValid);
					that.selectValue = selectValue;
					that.switchSelect();
				}
			},
			checkboxChange: function(event) {
				let that = this;
				let value = event.detail.value;
				let valid = that.skuArr;
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				let newValid = valid.map(item => {
					if (that.inArray(item.id, value)) {
						if (that.footerswitch) {
							if (item.attrStatus) {
								item.checked = true;
								arr1.push(item);
							} else {
								item.checked = false;
							}
						} else {
							item.checked = true;
							arr1.push(item);
						}
					} else {
						item.checked = false;
						arr2.push(item);
					}
					return item;
				});
				if (that.footerswitch) {
					arr3 = arr2.filter(item => !item.attrStatus);
				}

				that.$set(that.cartList, 'valid', newValid);
				that.isAllSelect = newValid.length === arr1.length + arr3.length;
				that.selectValue = value;
				that.switchSelect();
			},
			inArray: function(search, array) {
				for (let i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},

			//实时更新底部总价
			switchSelect: function() {
				let that = this;
				let validList = that.skuArr;
				let selectValue = that.selectValue;
				let selectCountPrice = 0.00;
				if (selectValue.length < 1) {
					that.selectCountPrice = selectCountPrice;
				} else {
					for (let index in validList) {
						if (that.inArray(validList[index].id, selectValue)) {
							selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index].cart_num, validList[index].price))
						}
					}
					that.selectCountPrice = selectCountPrice;
				}
			},
			/**
			 * 购物车手动填写
			 *
			 */
			iptCartNum: function(index) {
				let item = this.skuArr[index];

				this.switchSelect();
			},
			blurInput: function(index) {
				let item = this.skuArr[index];
				if (!item.cart_num) {
					item.cart_num = 1;
					this.$set(this.cartList, 'valid', this.skuArr)
				}
			},


			//减少
			subCart: function(index) {
				let that = this;
				let item = that.skuArr[index];
				item.cart_num = Number(item.cart_num) - 1;
				if (item.cart_num <= 0) {
					item.cart_num = 1;
					item.numSub = true;
				} else {
					item.numSub = false;
					item.numAdd = false;
				}

				that.skuArr[index] = item;
				that.switchSelect();
			},

			//增加
			addCart: function(index) {
				let that = this;
				let item = that.skuArr[index];
				item.cart_num = Number(item.cart_num) + 1;
				item.numSub = false;

				that.skuArr[index] = item;
				that.switchSelect();
			},
		},
	}
</script>

<style scoped lang="scss">
	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: solid 1rpx #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #FD502F;
				border-radius: 50%;
				padding: 4rpx;
			}
		}

		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}

		.foot-item .txt {
			font-size: 24rpx;


			&.active {}
		}
	}

	.shoppingCart {
		/* #ifdef H5 */
		// padding-bottom: 0;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}

	.shoppingCart .labelNav {
		height: 76rpx;
		padding: 0 30rpx;
		font-size: 22rpx;
		color: #8c8c8c;
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f5f5;
		z-index: 5;
		top: 0;
	}

	.shoppingCart .labelNav .item .iconfont {
		font-size: 25rpx;
		margin-right: 10rpx;
	}

	.shoppingCart .nav {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #282828;
		position: fixed;
		left: 0;
		z-index: 5;
		top: 76rpx;
	}

	.shoppingCart .nav .num {
		margin-left: 12rpx;
	}

	.shoppingCart .nav .administrate {
		font-size: 26rpx;
		color: #282828;
		width: 110rpx;
		height: 46rpx;
		border-radius: 6rpx;
		border: 1px solid #a4a4a4;
	}

	.shoppingCart .noCart {
		margin-top: 171rpx;
		background-color: #fff;
		padding-top: 0.1rpx;
	}

	.shoppingCart .noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.shoppingCart .noCart .pictrue image {
		width: 100%;
		height: 100%;
	}

	.shoppingCart .list {
		margin-top: 70rpx;
	}

	.shoppingCart .list .item {
		padding: 25rpx 30rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}

	.shoppingCart .list .item .picTxt {
		width: 627rpx;
		position: relative;
	}

	.shoppingCart .list .item .picTxt .pictrue {
		width: 160rpx;
		height: 160rpx;
	}

	.shoppingCart .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.shoppingCart .list .item .picTxt .text {
		width: 444rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.shoppingCart .list .item .picTxt .text .reColor {
		color: #999;
	}

	.shoppingCart .list .item .picTxt .text .reElection {
		margin-top: 20rpx;
	}

	.shoppingCart .list .item .picTxt .text .reElection .title {
		font-size: 24rpx;
	}

	.shoppingCart .list .item .picTxt .text .reElection .reBnt {
		width: 120rpx;
		height: 46rpx;
		border-radius: 23rpx;
		font-size: 26rpx;
	}

	.shoppingCart .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #868686;
		margin-top: 16rpx;
	}

	.shoppingCart .list .item .picTxt .text .money {
		font-size: 32rpx;
		color: var(--view-theme);
		margin-top: 28rpx;
	}

	.shoppingCart .list .item .picTxt .carnum {
		height: 47rpx;
		position: absolute;
		bottom: 7rpx;
		right: 0;
	}

	.shoppingCart .list .item .picTxt .carnum view {
		border: 1rpx solid #a4a4a4;
		width: 66rpx;
		text-align: center;
		height: 100%;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #a4a4a4;
	}

	.shoppingCart .list .item .picTxt .carnum .reduce {
		border-right: 0;
		border-radius: 3rpx 0 0 3rpx;
	}

	.shoppingCart .list .item .picTxt .carnum .reduce.on {
		border-color: #e3e3e3;
		color: #dedede;
	}

	.shoppingCart .list .item .picTxt .carnum .plus {
		border-left: 0;
		border-radius: 0 3rpx 3rpx 0;
	}

	.shoppingCart .list .item .picTxt .carnum .plus.on {
		border-color: #e3e3e3;
		color: #dedede;
	}

	.shoppingCart .list .item .picTxt .carnum .num {
		color: #282828;
	}

	.shoppingCart .invalidGoods {
		background-color: #fff;
	}

	.shoppingCart .invalidGoods .goodsNav {
		width: 100%;
		height: 66rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #282828;
	}

	.shoppingCart .invalidGoods .goodsNav .iconfont {
		color: #424242;
		font-size: 28rpx;
		margin-right: 17rpx;
	}

	.shoppingCart .invalidGoods .goodsNav .del {
		font-size: 26rpx;
		color: #999;
	}

	.shoppingCart .invalidGoods .goodsNav .del .icon-shanchu1 {
		color: #999;
		font-size: 33rpx;
		vertical-align: -2rpx;
		margin-right: 8rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f5f5f5;
	}

	.shoppingCart .invalidGoods .goodsList .item .invalid {
		font-size: 22rpx;
		color: #fff;
		width: 70rpx;
		height: 36rpx;
		background-color: #aaa;
		border-radius: 3rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item .pictrue {
		width: 140rpx;
		height: 140rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item .text {
		width: 433rpx;
		font-size: 28rpx;
		color: #999;
		height: 140rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item .text .name {
		width: 100%;
	}

	.shoppingCart .invalidGoods .goodsList .item .text .infor {
		font-size: 24rpx;
	}

	.shoppingCart .invalidGoods .goodsList .item .text .end {
		font-size: 26rpx;
		color: #bbb;
	}

	.shoppingCart .footer {
		z-index: 999;
		width: 100%;
		height: 96rpx;
		background-color: #fafafa;
		position: fixed;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		bottom: 10rpx;
		bottom: calc(10rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		bottom: calc(10rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.shoppingCart .footer.on {
		// #ifndef H5
		bottom: 0rpx;
		// #endif
	}

	.shoppingCart .footer .checkAll {
		font-size: 28rpx;
		color: #282828;
		margin-left: 16rpx;
	}

	// .shoppingCart .footer checkbox .wx-checkbox-input{background-color:#fafafa;}
	.shoppingCart .footer .money {
		font-size: 30rpx;
	}

	.shoppingCart .footer .placeOrder {
		color: #fff;
		font-size: 30rpx;
		width: 226rpx;
		height: 70rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 22rpx;
	}

	.shoppingCart .footer .button .bnt {
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.shoppingCart .footer .button form~form {
		margin-left: 17rpx;
	}

	.uni-p-b-96 {
		height: 96rpx;
	}

	.uni-p-b-98 {
		height: 100rpx;
		/* 兼容 IOS<11.2 */
		height: calc(100rpx + constant(safe-area-inset-bottom));
		/* 兼容 IOS>11.2 */
		height: calc(100rpx + env(safe-area-inset-bottom));
	}

	.emptyBox{
		text-align: center;
		padding-top: 20rpx;
		.tips{
			color: #aaa;
			font-size: 26rpx;
		}
		image {
			width: 414rpx;
			height: 304rpx;
		}
	}
</style>
